<template lang="html">
  <div class="musiclist">
     <div class="singer-info">
        <router-link :to="{name:'SingerInfo',params:{singerid:singerid}}" tag="div" class="detail">
           <div class="singer-icon"><img :src="singerInfo.avatar_big" :alt="singerInfo.name"></div>
           <div class="info">
            <!-- <p class="desc">2017年周杰伦全新专辑</p> -->
            <p class="desc">
              <span>{{singerInfo.name}}</span>
              <span>{{singerInfo.constellation}}</span>
            </p>
            <p class="live-style"></p>
            <p class="live-time">
              <span class="time">{{ singerInfo.birth }}</span>
              <span>{{singerInfo.country}}</span>
              <span>歌曲总数：{{singerInfo.songs_total}}</span>
            </p>
            <!-- <p class="live-time"><span class="time">12 - 02 09: 00</span><span> 5.4</span>万人已经关注</p> -->
          </div>
          <div class="go"><img src="../../../assets/images/icon-next32.png"></div>
        </router-link>

      <div class="hr"></div>
    </div>
  </div>
</template>

<script>
export default {
  name:"musiclist",
  data(){
    return{
      singerInfo:{}
    }
  },
  props:{
    singerid:{
      type:String,
      default:"1"
    }
  },
  created(){
    const SingerUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+this.singerid
    this.$axios.get(SingerUrl)
    .then(res => {
      // console.log(res);
      this.singerInfo = res.data
    })
    .catch(error => {
      console.log(error);
    })
  }
}
</script>

<style scoped>

.musiclist{
  background-color: #fff;
  margin-top: 10px;
  padding: 10px 17px;
  padding-top: 0;
}

/* 人气歌手样式 */
.singer-info{
	margin-left: 0.2rem;
	margin-bottom: 0.18rem;
}
.singer-info .singer-icon{
	width: 1.8rem;
	height: 1.8rem;
}
.singer-info .singer-icon img{
	width: 100%;
	height: 100%;
}
.singer-info .info{
	font-size: 0.24rem;
	padding-top: 0.3rem;
	padding-left: 0.15rem;
}
.singer-info .info .live-style{
	margin-top: 0.2rem;
	margin-bottom: 0.38rem;
	height:0.24rem;
}
.singer-info .hr{
	width: 5.28rem;
	height: 1px;
	background-color:#ccc;
	margin-top: 0.14rem;
	margin-left: 1.72rem;
}
.detail{
	overflow: hidden;
	position: relative;
}
.detail>div{
	float: left;
}
.detail  .go{
	position: absolute;
	width: 0.2rem;
	height: 0.32rem;
	top:0.76rem;
	right: 0.2rem;
}
.detail .go img{
	width: 100%;
	height: 100%
}
 .info .desc span{
  margin-left: 0.2rem;
   font-size: 14px;
}
.live-time span{
  margin-left: 0.03rem;
}
</style>
